<template>
  <div class="promulgator-manage">
    <c-title text="发布者信息"></c-title>
    <p class="tip">发布者信息</p>
    <van-cell-group>
      <van-field required  :value="realname" label="姓名" />
      <van-field required  :value="mobile" label="手机号" />
      <van-field required  :value="age" label="年龄" />
      <van-field required  :value="address" label="位置" />

      <div class="flex-start">
        <p class="required">上传身份证国徽面</p>
        <van-image width="6.4375rem" height="6.4375rem" :src="id_card_reverse" @click="preview(id_card_reverse)" />
      </div>
      <div class="flex-start" style="padding-bottom: 1.25rem;">
        <p class="required">上传身份证人面像</p>
        <van-image @click="preview(id_card_front)" width="6.4375rem" height="6.4375rem" :src="id_card_front" />
      </div>
    </van-cell-group>


    <template v-if="reason && apply_status!==1">
      <div class="reject" >
        <p  class="tip">驳回原因</p>
        <div class="reject-content">{{reason}}</div>
      </div>
      <div class="republish">
          <span  class="republish-btn" @click="submit">重新发布</span>
      </div>
    </template>
    <template v-else>
      <div class="republish">
          <van-button  block round color="#4978F8" @click="confirm">提交</van-button>
      </div>
    </template>


    <div @click="gotoRecord" class="record" >申请记录</div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { Image as VanImage } from 'vant';
export default {
  data() {
    return {
      realname: "",
      mobile: "",
      age: "",
      address: "",
      id_card_front: "",
      id_card_reverse: "",
      strShow:false,
      streetShow_apply:false,
      apply_status:null,
      id_card_front_img:"",
      id_card_reverse_img:"",
      province_id:"",
      city_id:"",
      district_id:"",
      street_id:"",
      reason:"",
    };
  },
  activated() {
    this.getData()
  },
  methods: {
    confirm(){
      let  json = {
          identity: 1,
          realname: this.realname,
          mobile: this.mobile,
          detail_info: {
            age: this.age,
          },
          province_id: this.province_id,
          city_id: this.city_id,
          district_id: this.district_id,
          street_id: this.street_id,
          annex_file: {
            id_card_front: this.id_card_front_img,
            id_card_reverse: this.id_card_reverse_img
          }
        }
      $http.post("plugin.be-within-call.frontend.role-apply.index", { data: json }, '').then(({ result, msg }) => {
        this.$toast(msg);
        if (result) {
          this.$router.replace(this.fun.getUrl("anytimeMy", { option: "wisdom" }));
        }
      })
    },
    submit(){
      this.$router.push(this.fun.getUrl('anytimeRoleApply',{apply_for_type:7}))
    },
    gotoRecord(){
      this.$router.push(this.fun.getUrl("anytimeMyRecord",{name:'promulgator'}))
    },
    getData() {
      $http.get("plugin.be-within-call.frontend.role-apply.detail", { role: 1 }, '').then(res => {
        if (res.result) {
          let data = res.data;
          this.apply_status = data.apply_status;
          this.realname = data.realname;
          this.mobile = data.mobile;
          this.age = data.detail_info.age;
          this.reason = data.reason;
          this.address=`${data.province_name} ${data.city_name} ${data.district_name}`;
          this.id_card_front=data.annex_file.id_card_front_url;
          this.id_card_reverse=data.annex_file.id_card_reverse_url;
          this.id_card_front_img=data.annex_file.id_card_front;
          this.id_card_reverse_img=data.annex_file.id_card_reverse;
          this.province_id=data.province_id;
          this.city_id=data.city_id;
          this.district_id=data.district_id;
          this.street_id=data.street_id;
        } else {
          this.$toast(res.msg);
        }
      })
    },
    preview(src) {
      ImagePreview([src]);
    }
  },
  components: { VanImage }
};
</script>

<style scoped lang="scss">
.promulgator-manage {
  .reject-content {
    padding: 1.125rem;
    background: #fff;
    word-break: break-all;
    text-align: left;
  }

  .republish {
    margin-top: 2.1875rem;
    background: #fff;
    text-align: right;
    padding: 0.875rem;
  }

  .republish-submit {
    display: block;
    border-radius: 100px;
    background: #4978f8;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.7rem 0.65rem;
    text-align: center;
  }

  .republish-btn {
    border-radius: 100px;
    background: #4978f8;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.3125rem 0.65rem;
  }

  .record {
    position: fixed;
    bottom: 5rem;
    right: 0.75rem;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    background: #4978f8;
    border-radius: 100px;
    color: #fff;
    text-align: center;
  }

  .flex-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.0938rem 1rem 0;
  }

  .required {
    position: relative;
    text-align: left;
    margin-bottom: 0.875rem;

    &::before {
      position: absolute;
      left: -0.4063rem;
      color: #ee0a24;
      font-size: 15px;
      content: '*';
    }
  }

  .tip {
    font-size: 1.1rem;
    padding: 1.1563rem 0.6563rem;
    text-align: left;
    font-weight: 500;
  }
}
</style>
